<template>
  <div class="page">

    <div class="block" >
      <div class="VerticalBox">
        <div class="VerticalNav nav" :scroll-top="VerticalNavTop" >
          <div v-for="(index) in 5" :class="index==2?'text-green cur':'' " class="tien-item" bindtap='tabSelect' :data-id="index">
            Tab{{index}}
          </div>
        </div>
        <div class="VerticalMain" scroll-into-view="main-id-1" bindscroll="VerticalMain">
          <div v-for="(index) in 2" class="padding-top padding-lr" :id="'main-id-'+index ">
            <div class='tien-bar solid-bottom bg-white'>
              <div class='action'>
                <span class='icon-title text-green'></span> Tab{{index +1}}</div>
            </div>
            <div class="tien-list menu menu-avatar">
              <div class="tien-item">
                <div class="tien-avatar round lg" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></div>
                <div class='content'>
                  <div class='text-grey'>文晓港</div>
                  <div class='text-gray text-sm'>
                    <span class='icon-infofill text-red'></span> 消息未送达</div>
                </div>
                <div class='action'>
                  <div class='text-grey text-xs'>22:20</div>
                  <div class="tien-tag round bg-grey sm">5</div>
                </div>
              </div>
              <div class="tien-item">
                <div class="tien-avatar round lg" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);">
                  <div class="tien-tag badge">99+</div>
                </div>
                <div class='content'>
                  <div class='text-grey'>文晓港
                    <div class="tien-tag round bg-orange sm">SVIP</div>
                  </div>
                  <div class='text-gray text-sm'>
                    <span class='icon-redpacket_fill text-red'></span> 收到红包</div>
                </div>
                <div class='action'>
                  <div class='text-grey text-xs'>22:20</div>
                  <div class='icon-notice_forbid_fill text-gray'></div>
                </div>
              </div>
              <div class="tien-item ">
                <div class="tien-avatar radius lg" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></div>
                <div class='content'>
                  <div>喵星人互动群</div>
                  <div class='text-gray text-sm'>
                    喵星酱：喵喵喵！</div>
                </div>
                <div class='action'>
                  <div class='text-grey text-xs'>22:20</div>
                  <div class="tien-tag round bg-red sm">5</div>
                </div>
              </div>
              <div class="tien-item grayscale">
                <div class="tien-avatar radius lg" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></div>
                <div class='content'>
                  <div>喵星人互动群</div>
                  <div class='text-gray text-sm'>
                    喵星酱：喵喵喵！</div>
                </div>
                <div class='action'>
                  <div class='text-grey text-xs'>22:20</div>
                  <div class="tien-tag round bg-red sm">5</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>


  </div>
</template>

<script>

export default {
  name:'icon',
  data() {
    return {
      TabCur: 0,
      VerticalNavTop: 0
    };
  },
  mounted() {
    
  },
  methods: {
    
    
  },
};
</script>
